<style>
#sign-head { box-sizing:border-box; width:100%;display:inline-block; vertical-align:middle; background:#fb7; color:#333}
#sign-head i {font-size:22px}
#sign-head form {font-size: 14px;text-align:right}
#sign-head input[type="text"], #sign-head input[type="password"] {box-sizing:border-box;margin:0 3px;padding:0 2px;width:4.8em;height:1.75em;border:1px solid #ccc;border-radius:3px}
#sign-head button {font-size:11px;line-height:11px;padding:6px 8px;background:none;border:none;}
#sign-head .button-likeText {position:absolute;padding:5px 9px;right:3px;top:1px}
#sign-head .position-anchor {line-height:22px}
#search-hotwords {background:#fb7;position:absolute;top:105%;display:none;left:5px;right:0;text-align:center;padding:6px}
#search-hotwords span {display:inline-block;padding:6px;margin:6px;background:white;border-radius:6px}
</style>
<script>
$(function(){
    var searchInput = $('#sign-head input[type="text"]');
    var searchHotwords = $('#search-hotwords');
    searchInput.focus(function(){ searchHotwords.css('display','block')});
    searchInput.blur(function(){setTimeout(function(){ searchHotwords.css('display','none')}, 200)});
    var hotwords = $('#search-hotwords > span > a');
    hotwords.click(function(){searchInput.val($(this).text())});
});
</script>
<div id="sign-head">
<div class="width-limit childs-padding-arround-6 hbox align-items-center">
<div>
    <a href="javascript:;" style="padding:6px"><i class="fa fa-navicon"></i></a>
</div>
<div style="flex-grow:1;padding:3px 12px">
    <div style="width:100%;position:relative">
        <button style="position:absolute;top:0;left:5px"><img src="icon/scan32.png" /></button>
        <button style="position:absolute;top:0;right:0"><img src="icon/search32.png" /></button>
        <input type="text" style="width:100%;height:45px;background: #fed;padding:3px 45px;font-size:16px;text-align:center" placeholder="找好吃的: 开心果 夏威夷果 碧根果"/>
        <div id="search-hotwords">
            <span><a href="javascript:;">奥利奥</a></span><span><a href="javascript:;">三只松鼠坚果</a></span><span><a href="javascript:;">好乐美奶茶</a></span><span><a href="javascript:;">火宫殿牛板筋</a></span>
            <span><a href="javascript:;">泡椒凤爪</a></span><span><a href="javascript:;">水果布丁</a></span><span><a href="javascript:;">DOVE巧克力</a></span><span><a href="javascript:;">淮盐花生</a></span>
            <span><a href="javascript:;">小浣熊干脆面</a></span><span><a href="javascript:;">RIO鸡尾酒</a></span><span><a href="javascript:;">椰树牌椰汁</a></span><span><a href="javascript:;">红星二锅头</a></span>
            <span><a href="javascript:;">无穷鸡腿</a></span><span><a href="javascript:;">可比克薯片</a></span><span><a href="javascript:;">九制陈皮</a></span><span><a href="javascript:;">双汇玉米肠</a></span>
            <span><a href="javascript:;">美好时光海苔</a></span><span><a href="javascript:;">盼盼铜锣烧</a></span><span><a href="javascript:;">火龙果</a></span><span><a href="javascript:;">水蜜桃</a></span>
            <span><a href="javascript:;">荔枝</a></span><span><a href="javascript:;">龙眼</a></span><span><a href="javascript:;">百果园蔬果大拼盘</a></span>
        </div>
    </div>
</div>
<div>
    <button style="margin-left:-3px;color:#333"><i class="fa fa-user"></i></button>
</div>
</div>
</div>